<template>
  <div class="about">
    <h1>{{ id ? "编辑" : "新增" }}英雄</h1>
    <el-form @submit.native.prevent="save" label-width="120px">
      <!-- 用tabs分开显示基础信息和高级信息  valuea表示默认显示的页面的name值 -->
      <el-tabs value="basic">
        <el-tab-pane name="basic" label="基础信息">
          <el-form-item label="名称">
            <el-input v-model="model.name"></el-input
          ></el-form-item>
          <el-form-item label="称号">
            <el-input v-model="model.title"></el-input
          ></el-form-item>
          <!-- 英雄类型用下拉框 -->
          <el-form-item label="类型">
            <!-- multiple属性：多选/ elementui 带的 -->
            <el-select v-model="model.categories" multiple>
              <!-- option的数据要自动从英雄父级分类的二级分类中选择的 -->
              <!-- 如何做映射？ -->
              <!-- 1.循环展示先：v-for -->
              <!-- 2.编写接口获取数据 在created()时调用 -->
              <el-option
                v-for="(item, index) in categories"
                :key="index"
                :label="item.name"
                :value="item._id"
              ></el-option> </el-select
          ></el-form-item>
          <el-form-item label="评分">
            <el-form-item label="难度">
              <!-- 引用了多级，前一级一定要定义出来，譬如model.name=>model要先定义出来//model.scores.diffcult=>要把model和scores先定义出来 -->
              <!-- el-rate 评分组件 :max=最多的星数 show-score:显示分数 -->
              <!-- 和字体对齐：设置上边距为0.6rem -->
              <el-rate
                style="margin-top: 0.6rem"
                :max="9"
                show-score
                v-model="model.scores.difficult"
              ></el-rate>
            </el-form-item>
            <el-form-item label="技能">
              <el-rate
                style="margin-top: 0.6rem"
                :max="9"
                show-score
                v-model="model.scores.skills"
              ></el-rate>
            </el-form-item>
            <el-form-item label="攻击">
              <el-rate
                style="margin-top: 0.6rem"
                :max="9"
                show-score
                v-model="model.scores.attack"
              ></el-rate>
            </el-form-item>
            <el-form-item label="生存">
              <el-rate
                style="margin-top: 0.6rem"
                :max="9"
                show-score
                v-model="model.scores.survive"
              ></el-rate>
            </el-form-item>
          </el-form-item>
          <el-form-item label="顺风">
            <el-select v-model="model.items1" multiple>
              <!-- item是一个可供选择是装备数据库 定义接口去获取 -->
              <el-option
                v-for="(item, index) in item"
                :key="index"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="逆风">
            <el-select v-model="model.items2" multiple>
              <el-option
                v-for="(item, index) in item"
                :key="index"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用技巧">
            <!-- textarea:大文本框 -->
            <el-input type="textarea" v-model="model.usageTips"></el-input>
          </el-form-item>
          <el-form-item label="对抗技巧">
            <el-input type="textarea" v-model="model.battleTips"></el-input
          ></el-form-item>
          <el-form-item label="团战思路">
            <el-input type="textarea" v-model="model.teamTips"></el-input
          ></el-form-item>
          <el-form-item label="英雄关系">
            <el-button
              type="primary"
              size="small"
              @click="model.partners.push({})"
              icon="el-icon-edit"
              plain
              >添加关系</el-button
            >
            <!-- 英雄关系这里希望可以做到一个英雄出对应描述 -->
            <el-row type="flex">
              <el-col
                :md="12"
                v-for="(ite, index) in model.partners"
                :key="index"
              >
                <el-form-item label="最佳搭档" label-width="70px">
                  <el-select v-model="ite.heroes" style="width: 12rem">
                    <el-option
                      v-for="(item, index) in allheroes"
                      :key="index"
                      :label="item.name"
                      :value="item._id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="描述" label-width="70px">
                  <el-input
                    type="textarea"
                    v-model="ite.description"
                    style="width: 12rem"
                  ></el-input>
                </el-form-item>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  plain
                  style="margin-left: 4rem; margin-top: 5px"
                  @click="model.partners.splice(index, 1)"
                ></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="http://47.104.164.246/admin/api/upload"
              :show-file-list="false"
              :on-success="afterupload"
            >
              <img v-if="model.icon" :src="model.icon" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!-- $set(对象,参数,数据) -->
          <el-form-item label="背景图">
            <el-upload
              class="avatar-uploader"
              action="http://47.104.164.246/admin/api/upload"
              :show-file-list="false"
              :on-success="(res) => $set(model, 'banner', res.url)"
            >
              <img v-if="model.banner" :src="model.banner" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane name="skills" label="技能">
          <!-- 点击操作：增加一个空对象以添加新内容 -->
          <el-button
            icon="el-icon-edit"
            @click="model.skills.push({})"
            size="small"
            >技能编辑</el-button
          >
          <!-- 要实现的效果：每点击一下技能编辑就弹出编辑框可以编辑技能 -->
          <!-- el-rwo是layout 布局  flex 为流动布局 -->
          <el-row type="flex" style="flex-wrap: wrap">
            <!-- el-col是布局中要显示的内容  :md为格栅数，即可显示区域-->
            <!-- 通过循环model.skills的内容来完成多次编辑，当model.skiils数组为空时没有东西可以循环所以就不显示，而当 -->
            <!-- 点击了技能编辑按钮时给model.skills添加一个空数据，于是就可以循环增加了一个技能编辑栏目———要实现多组数据的逐次添加可以参考这个模式 -->
            <el-col :md="12" v-for="(item, index) in model.skills" :key="index">
              <el-form-item label="名称">
                <el-input v-model="item.name"></el-input
              ></el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" v-model="item.description"></el-input
              ></el-form-item>
              <el-form-item label="小提示">
                <el-input v-model="item.tips"></el-input
              ></el-form-item>
              <!-- 图标是一个上传的样式 -->
              <el-form-item label="图标">
                <!-- 注意item本来没定义icon，要想把icon显示出来要显式声明或者先定义好 -->
                <el-upload
                  class="avatar-uploader"
                  action="http://47.104.164.246/admin/api/upload"
                  :show-file-list="false"
                  :on-success="
                    (res) => {
                      $set(item, 'icon', res.url);
                    }
                  "
                >
                  <img v-if="item.icon" :src="item.icon" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <!-- 删除操作为model.skills.splice(删除从哪开始[索引],删除几个) -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="model.skills.splice(index, 1)"
              ></el-button>
              <!-- 删除后再点击保存就能成功删除 -->
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button
          type="primary"
          native-type="submit"
          style="margin-top: 1rem"
          >{{ id ? "保存" : "提交" }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "heroesEdit",
  props: {
    id: {},
  },
  data() {
    return {
      allheroes: [],
      item: [],
      categories: [],
      all: [],
      model: {
        icon: "",
        scores: {},
        partners: [],
        skills: [],
        banner: {},
      },
    };
  },
  methods: {
    afterupload(res) {
      // 不用$set赋值直接先预先定义一个空对象也行
      // this.$set(this.model,'icon',res.url)
      this.model.icon = res.url;
    },
    async fetchcategories() {
      //获取categories数据的接口
      //1.先调用总体categories()数据
      this.all = await this.$http1.get("rest/categories");
      //最原始的元素筛选
      //数据以数组的形式存储，所以要查找时直接用数组形式表示
      //es6 新增筛查找形式：for（var x of arry） --x为当前循环到的对象，无论是数组还是对象形式
      for (var i = 0; i < this.all.data.length; i++) {
        if (this.all.data[i]["parent"] != undefined)
          if (this.all.data[i]["parent"]["_id"] === "625393c105333d0dd2b12b74")
            this.categories.push(this.all.data[i]);
      }
    },
    async save() {
      let res;
      if (this.id) {
        res = await this.$http1.put(`rest/heroes/${this.id}`, this.model);
      } else {
        res = await this.$http1.post("rest/heroes", this.model);
      }
      console.log(res);
      this.$router.push("/heroes/list");
      this.$message({
        type: "success",
        message: (this.id ? "保存" : "提交") + "成功",
      });
    },
    async fech() {
      const res = await this.$http1.get(`rest/heroes/${this.id}`);
      //有些英雄数据没有写完为了防止对数据的覆盖采用数据拼接的形式来避免数据被覆盖
      this.model = { ...this.model, ...res.data };
    },
    async fetchitem() {
      //获取装备的数据，和itemslist页面的数据一致
      const res = await this.$http1.get("rest/items");
      this.item = res.data;
    },
    async fetchallheroes() {
      const res = await this.$http1.get("rest/heroes");
      this.allheroes = res.data;
    },
  },
  created() {
    this.id && this.fech();
    this.fetchcategories();
    this.fetchitem();
    this.fetchallheroes();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
}
.avatar {
  width: 5rem;
  height: 5rem;
  display: block;
}
</style>